<template>
  <el-dialog
    title="编辑客户信息"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <avue-form
      ref="addForm"
      v-model="form"
      :option="tableOption"
    >
      <template #labels>
        <div>
          <el-button
            type="text"
            @click="addLabel"
          >添加标签</el-button>
          <div>
            <el-tag
              v-for="tag in form.labels"
              :key="tag.id"
              closable
              class="tags-item"
              @close="handleClose(tag)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </div>
      </template>
    </avue-form>
    <div class="flex-end">
      <el-button @click="visible = false">取消</el-button>
      <el-button
        class="btn"
        type="primary"
        :loading="loading"
        @click="confirm"
      >
        确定
      </el-button>
    </div>
    <selectLabel
      v-model="selectVisible"
      :select-list="form.labels"
      @selected="selected"
    ></selectLabel>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { editObj, getObj } from '@/api/app/customer';
import selectLabel from './selectLabel';
import { CUSTOMER_TYPE_LIST } from '@/const/type';
export default {
  name: 'editPopup',
  components: { selectLabel },
  props: {
    userId: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectVisible: false,
      form: {
        labels: [],
      },
      loading: false,
      tableOption: {
        ...window.$crudMixins.tableOptions,
        emptyBtn: false,
        submitBtn: false,
        addBtn: false,
        labelWidth: 110,
        column: [
          {
            label: '用户编号',
            prop: 'code',
            search: true,
            disabled: true,
          },
          {
            type: 'input',
            label: '用户昵称',
            prop: 'nickname',
            search: true,
            disabled: true,
            rules: [
              {
                required: true,
                message: '请输入用户名',
              },
              {
                min: 3,
                max: 20,
                message: '长度在 3 到 20 个字符',
                trigger: 'blur',
              },
            ],
          },
          {
            type: 'input',
            label: '手机号',
            prop: 'phone',
            search: true,
            disabled: true,
            width: 160,
            rules: [
              {
                min: 11,
                max: 11,
                required: true,
                message: '长度在 11 个字符',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '类型',
            prop: 'type',
            type: 'select',
            search: true,
            rules: [
              {
                required: true,
                message: '请选择类型',
                trigger: 'blur',
              },
            ],
            dicData: CUSTOMER_TYPE_LIST,
          },
          {
            label: '状态',
            prop: 'lockFlag',
            type: 'select',
            search: true,
            rules: [
              {
                required: true,
                message: '请选择状态',
                trigger: 'blur',
              },
            ],
            dicData: [
              {
                label: '有效',
                value: '0',
              },
              {
                label: '锁定',
                value: '9',
              },
            ],
          },
          {
            label: '用户标签',
            prop: 'labels',
            slot: true,
            span: 24,
          },
          // {
          //   label: '用户标签',
          //   prop: 'labels',
          //   type: 'select',
          //   dicUrl: '/app/appuser/label/list',
          //   multiple: true,
          //   rules: [
          //     {
          //       required: false,
          //       message: '请选择用户标签',
          //     },
          //   ],
          //   props: {
          //     label: 'name',
          //     value: 'id',
          //   },
          // },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea',
            maxlength: 100,
            minRows: 7,
            showWordLimit: true,
            rules: [
              { required: false, message: '请输入备注', trigger: 'blur' },
            ],
            span: 24,
          },
        ],
      },
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    ...mapGetters(['userInfo', 'access_token']),
  },
  watch: {
    visible(val) {
      if (val) {
        this.getDetail();
      } else {
        this.$refs.addForm && this.$refs.addForm.resetForm();
      }
    },
  },
  methods: {
    addLabel() {
      this.selectVisible = true;
    },
    handleClose(tag) {
      this.form.labels.splice(
        this.form.labels.map((el) => el.id).indexOf(tag.id),
        1
      );
    },
    selected(arr) {
      this.form.labels = [...arr];
    },
    async getDetail() {
      const res = await getObj(this.userId);
      this.form = { ...res.data.data };
      this.form.labels = this.form.labelList;
    },
    confirm() {
      this.$refs.addForm.validate(async (valid, done) => {
        if (valid) {
          this.loading = true;
          try {
            const params = { ...this.form };
            params.labels = this.form.labels.map((el) => el.id);
            await editObj(params);
            this.$message.success('操作成功');
            this.$emit('success', true);
            done();
            this.loading = false;
            this.visible = false;
          } catch (error) {
            done();
            this.loading = false;
            throw new Error(error);
          }
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.tags-item {
  margin-right: 10px;
}
</style>
